<template>
	<scroll 
			class="suggest" 
			:data="result" 
			:pullup="pullup"
			:beforeScroll="beforeScroll"
			@scrollToEnd="searchMore"
			@beforeScroll="listScroll"
			ref="suggest"
		>
		<ul class="suggest-list">
			<li 
				@click="selectItem(item)"
				class="suggest-item" 
				v-for="item in result"
			>
				<div class="icon">
					<li :class="getIconCls(item)"></li>
				</div>
				<div class="name">
					<p class="text" v-html="getDisplayName(item)"></p>
				</div>
			</li>
			<loading v-show="hasMore" title=""></loading>
		</ul>
		<div class="no-result-wrapper" v-show="!hasMore && !result.length">
			<no-result title="抱歉，暂无搜索结果"></no-result>
		</div>
	</scroll>
</template>

<script>
	import { search } from '@/api/search'
	import { ERR_OK } from '@/api/config'
	import { createSong } from '@/common/js/song'
	import Scroll from '@/base/scroll/scroll'
	import Loading from '@/base/loading/loading'
	import NoResult from '@/base/no-result/no-reslut'

	import Singer from '@/common/js/singer'
	import { mapMutations, mapActions } from 'vuex'


	const TYPE_SINGER = 'singer'
	const perpage = 20


	export default {
		props: {
			query: {
				type: String,
				default: ''
			},
			showSinger: {
				type:Boolean,
				default: true
			}
		},
		data() {
			return {
				// 显示当前页面
				page: 1,
				//接受检索结果，默认为空数组
				result: [],
				// 上拉刷新
				pullup: true,
				beforeScroll: true,
				hasMore: true
			}
		},
		methods: {
			// 请求服务端抓取数据
			// 渲染到列表里面
			search() {
				this.page = 1
				this.hasMore = true
				// 滚动到顶部
				this.$refs.suggest.scrollTo(0, 0)
				search(this.query, this.page, this.showSinger, perpage).then((res) => {
					// 对用axios获取的数据改变为json格式
					let resultData = JSON.parse(res.substring(res.indexOf("{"),res.lastIndexOf("}")+1))
					if (resultData.code === ERR_OK) {
						this.result = this._getResult(resultData.data)
						// console.log(this.result);
						this._checkMore(resultData.data)
					}
				})
			},
			searchMore() {
				if (!this.hasMore) {
					return 
				}
				this.page ++ 
				search(this.query,  this.page, this.showSinger, perpage).then((res) => {
					let resultData = JSON.parse(res.substring(res.indexOf("{"),res.lastIndexOf("}")+1))
					if (resultData.code === ERR_OK) {
						this.result = this.result.concat(this._getResult(resultData.data))
						// console.log(this.result);
						this._checkMore(resultData.data)
					}
				})
			},
			// 根据情况显示相应的icon图标
			getIconCls(item) {
				// 如果type是 TYPE_SINGER 
				if(item.type === TYPE_SINGER) {
					return `icon-mine`
				} else {
					return `icon-music`
				}
			},
			getDisplayName(item) {
				if(item.type === TYPE_SINGER) {
					return item.singername
				} else {
					return `${item.name}-${item.singer}`
					// return `${item.songname}-${filterSinger(item.singer)}`
				}
			},
			selectItem(item) {
				if (item.type == TYPE_SINGER) {
					const singer = new Singer({
						id: item.singermid,
						name: item.singername
					})
					this.$router.push({
						path: `/search/${singer.id}`
					})
					this.setSinger(singer)
				} else {
					this.insterSong(item)
				}
				this.$emit('select')
			},
			refresh() {
				// 刷新suggest组件
				this.$refs.suggest.refresh()
			},
			listScroll() {
				// 派发事件
				this.$emit('listScroll')
			},
			_checkMore(data) {
				const song = data.song
				// 进行判断
				if (!song.list.length || (song.curnum + song.curpage * perpage) > song.totalnum) {
					this.hasMore = false
				}
			},
			// 进行数据的处理
			_getResult(data) {
				let ret = []
				// console.log("data", data);
				// 如果有这一个结果，就把结果push进去
				if (data.zhida && data.zhida.singerid) {
					ret.push({...data.zhida, ...{type: TYPE_SINGER}})
				}
				if (data.song) {
					ret = ret.concat(this._normalizeSongs(data.song.list))
				}
				return ret
			},
			_normalizeSongs(list){
				let ret = []
				list.forEach((musicData) => {
					if (musicData.songid && musicData.albumid) {
						ret.push(createSong(musicData))
					}
				})
				return ret
			},
			...mapMutations({
				setSinger: 'SET_SINGER'
			}),
			...mapActions([
				'insterSong'
			])
		},
		watch: {
			// watch search的变化
			// 当query发生变化的时候，调用服务端
			query() {
				this.search()
			}
		},
		components: {
			Scroll,
			Loading,
			NoResult
		}
	}
</script>

<style scoped lang="stylus">
	@import "~common/stylus/variable"
	@import "~common/stylus/mixin"
	
	.suggest
		height: 100%
		overflow: hidden
		.suggest-list
			padding: 0 30px
			.suggest-item
				display: flex
				align-items: center
				padding-bottom: 20px
			.icon
				flex: 0 0 30px
				width: 30px
				[class^="icon-"]
					font-size: 14px
					color: $color-text-d
			.name
				flex: 1
				font-size: $font-size-medium
				color: $color-text-d
				overflow: hidden
				.text
					no-wrap()
		.no-result-wrapper
			position: absolute
			width: 100%
			top: 50%
			transform: translateY(-50%)
</style>

